<template>
  <div id="container" :data="data">
    <chartTitle :title="title" :showSelelct="showSelelct"></chartTitle>
    <div class="group" v-if="tab">
      <div
        :class="btnActived == index + 1 ? 'active' : ''"
        @click="_tabClick(item, index + 1)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="main" :id="id"></div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
// import autoSize from '../../uitils/auto-font-size.js'
import chartTitle from './chart-title/index.vue'
export default {
  components: {
    chartTitle
  },
  name: 'chart-ybar',
  props: {
    showSelelct: {
      type: Boolean,
      default: false
    },
    title: String,
    tab: {
      type: Boolean,
      default: false
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    horizontal: {
      type: Boolean,
      default: false
    },
    barWidth: {
      type: [Number, String],
      default: 8
    },
    thresholdValue: {
      //阈值，变色
      type: Number,
      default: 1000
    },
    yAxisLabelPosition: {
      type: [String, Array],
      default:()=>[0, '-17']
    }
  },
  data() {
    return {
      show: true,
      btnActived: 1
    }
  },
  computed: {
    id: function() {
      return `main-${Math.random()}`
    }
  },
  mounted() {
    setTimeout(() => {
      this._initBar()
    }, 3500)
  },
  updated() {
    setTimeout(() => {
      this._initBar()
    }, 1000)
  },
  methods: {
    _tabClick(name, index) {
      this.btnActived = index
      this.$emit('tab-click', name, index)
    },
    fontSize(val, initWidth = 1920) {
      let nowClientWidth = document.documentElement.clientWidth
      return val * (nowClientWidth / initWidth)
    },
    _initBar() {
      let _this = this
      let option = {
        // title: this.chartTitle,
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const { product, count } = params[0].data
            // const icon = `<span style="display: inline-block;width:10px;height: 10px;background-color: ${color};border-radius: 50%;margin-right: 5px"></span>`
            let str_before = product.split('|')[0] //截取|前面的字符
            let str_after = product.split('|')[1] //截取|后面的字符
            // console.log("str_after")
            // console.log(str_after)
            if (str_after != undefined && str_after != 'null') {
              let product1 = `<p style="margin-bottom:0;">${str_before}</p>`
              let count1 = `<p style="margin-bottom:0;">${'数量：' + count}</p>`
              let ratio = `<p style="margin-bottom:0;">${'占比：' + str_after}</p>`
              return product1 + count1 + ratio
            } else {
              let product1 = `<p style="margin-bottom:0;">${str_before}</p>`
              let count1 = `<p style="margin-bottom:0;">${'数量：' + count}</p>`
              return product1 + count1
            }
          }
        },
        grid: {
          left: '10px',
          right: '10%',
          bottom: '15%',
          top: !this.tab?'10%':'20%',
          containLabel: false
        },
        yAxis: {
          type: 'category',
          inverse: true,
          show: false
        },
        xAxis: [
          {
            show: true,
            axisLabel: {
              formatter: value => {
                return value
              },
              color: '#fff',
              fontSize: 12
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#ccc',
                type: 'dashed'
              }
            }
          },
          {
            show: false
          }
        ],

        series: [
          //x轴
          {
            show: false,
            type: 'bar',
            barGap: '-110%',
            barWidth: this.barWidth,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                },
                position: 'right'
              }
            }
            // encode: {
            //   x: 'nums',
            // },
          },
          //y轴
          {
            show: false,
            type: 'bar',
            xAxisIndex: 1, //代表使用第二个X轴刻度
            barGap: '-100%',
            barWidth: this.barWidth,
            itemStyle: {
              normal: {
                color: function(params) {
                  let obj = {}
                  //超过阈值柱子变色
                  if (params.value.count > _this.thresholdValue) {
                    obj = {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 1, //颜色的开始位置
                          color: '#061B34' // 0% 处的颜色
                        },
                        {
                          offset: 0, //颜色的结束位置
                          color: '#59B540' // 100% 处的颜色
                        }
                      ]
                    }
                  } else {
                    obj = {
                      x: 1,
                      y: 0,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 1, //颜色的开始位置
                          color: '#061B34' // 0% 处的颜色
                        },
                        {
                          offset: 0, //颜色的结束位置
                          color: '#00ADFD' // 100% 处的颜色
                        }
                      ]
                    }
                  }
                  return obj
                }
              }
            },
            label: {
              normal: {
                show: true,
                position: this.yAxisLabelPosition, //'insideRight' 、[0, '-17'],
                // formatter: '{b}', //正常不加ratio的时候使用
                formatter: params => {
                  const { product } = params.data
                  let str_before = product.split('|')[0] //截取|前面的字符
                  // let str_after = product.split('|')[1] //截取|后面的字符
                  return str_before
                },
                textStyle: {
                  fontSize: 12,
                  color: '#fff'
                }
              }
            }
            // encode: {
            //   y: 'product',
            // },
          }
        ],
        dataset: {
          source: this.data
        }
      }
      let documentChart = document.getElementById(this.id)
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart)
        this.chart.setOption(option)
      }
      window.addEventListener('resize', () => {
        this.chart.resize()
        this.show = false
        setTimeout(() => {
          this.show = true
        }, 300)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: rgba(9, 23, 68, 0.5);
  border: 1px solid #1438ab;
  border-top: none;
  display: flex;
  flex-flow: column;
  .main {
    height: 90%;
  }

.group {
  display: flex;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 2.5vh;
  z-index: 1000;
  div {
    min-width: 7vh;
    padding: 0 5px;
    height: 2.777vh;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-image: url(../../../assets/daping/components/defaultBtn.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    font-size: 1.48vh;
    color: #fff;
    cursor: pointer;
    margin-right: 5px;
    background-color: #152e69;
    border-radius: 2px;
  }

  .active {
    // background-image: url(../../../assets/daping/components/activeBtn.png);
    color: #fff;
    background-color: #316110;
    font-weight: bold;
    border: 1px solid #7dc94e;
  }
}
}
</style>
